<script setup lang="ts">
import NavBar from '@renderer/components/navBar.vue'
import formButton from '@renderer/components/formButton.vue'
import { ref } from 'vue'
import lineForm from '@renderer/components/lineForm.vue'
import waterproofForm from '@renderer/components/waterproofForm.vue'
import otherForm from '@renderer/components/otherForm.vue'
import tearForm from '@renderer/components/tearForm.vue'
import cabinetForm from '@renderer/components/cabinetForm.vue'
import handleCollectionData from '@renderer/utils/handleCollectionData'
import { useRouter } from 'vue-router'
import useComputeForm from '@renderer/composables/useComputeForm'
import { Round, CheckOne } from '@icon-park/vue-next'
const route = useRouter()
const pageQuery = route.currentRoute.value.query
const addOtherDialog = ref(false)
const allOther = ref(['线条类', '柜子类', '防水类', '拆砌改类', '其他类'])
const checkOther = ref<string[]>([])
const handleAddCeiling = () => {
  addOtherDialog.value = true
}
const handleCheckOther = (item: any) => {
  if (checkOther.value.includes(item)) {
    checkOther.value = checkOther.value.filter((ceilingItem) => ceilingItem !== item)
  } else {
    checkOther.value.push(item)
  }
}
const handleClose = () => {
  addOtherDialog.value = false
}
const getOtherData = () => {
  const line = checkOther.value.includes('线条类') ? lineFormItem.value! : []
  const waterproof = checkOther.value.includes('防水类') ? waterproofFormItem.value! : []
  const other = checkOther.value.includes('其他类') ? otherFormItem.value! : []
  const tear = checkOther.value.includes('拆砌改类') ? tearFormItem.value! : []
  const cabinet = checkOther.value.includes('柜子类') ? cabinetFormItem.value! : []
  return [...line, ...waterproof, ...other, ...tear, ...cabinet]
}
defineExpose({ getOtherData })
const {
  lineFormItem,
  handleLineFormItem,
  waterproofFormItem,
  handleWaterproofFormItem,
  otherFormItem,
  handleOtherFormItem,
  tearFormItem,
  handleTearFormItem,
  cabinetFormItem,
  handleCabinetFormItem,
} = handleCollectionData()
const { getOtherGather } = useComputeForm()
await handleLineFormItem(pageQuery.calculate_id as unknown as number, pageQuery.house_number as unknown as number)
await handleWaterproofFormItem(pageQuery.calculate_id as unknown as number, pageQuery.house_number as unknown as number)
await handleOtherFormItem(pageQuery.calculate_id as unknown as number, pageQuery.house_number as unknown as number)
await handleTearFormItem(pageQuery.calculate_id as unknown as number, pageQuery.house_number as unknown as number)
await handleCabinetFormItem(pageQuery.calculate_id as unknown as number, pageQuery.house_number as unknown as number)
const initForm = async () => {
  const res = await getOtherGather({
    calculate_id: pageQuery.calculate_id,
    house_number: pageQuery.house_number,
  })
  if (res.length) {
    checkOther.value = []
    res.map((projectItem) => {
      let otherInfoList = [] as any[]
      switch (projectItem.cate_name) {
        case '线条类':
          otherInfoList = [...lineFormItem.value!]
          otherInfoList = handleData(otherInfoList, projectItem)
          lineFormItem.value = otherInfoList
          break
        case '防水类':
          otherInfoList = [...waterproofFormItem.value!]
          otherInfoList = handleData(otherInfoList, projectItem)
          waterproofFormItem.value = otherInfoList
          break
        case '其他类':
          otherInfoList = [...otherFormItem.value!.filter((item) => item.isShow !== false)]
          otherInfoList = handleData(otherInfoList, projectItem)
          otherFormItem.value = otherInfoList
          break
        case '拆砌改类':
          otherInfoList = [...tearFormItem.value!]
          otherInfoList = handleData(otherInfoList, projectItem)
          tearFormItem.value = otherInfoList
          break
        case '柜子类':
          otherInfoList = [...cabinetFormItem.value!]
          otherInfoList = handleData(otherInfoList, projectItem)
          cabinetFormItem.value = otherInfoList
          break
      }
      checkOther.value.push(projectItem.cate_name)
    })
  }
}
const handleData = (otherInfoList, projectItem) => {
  otherInfoList.forEach((item) => {
    const itemObjInfo = projectItem.other_info.find((itemObj) => itemObj.name == item.name)
    item.value =
      itemObjInfo.value != '全房普平工艺' &&
      itemObjInfo.value != '全房边口顺平工艺' &&
      itemObjInfo.value != '全房冲筋找平工艺' &&
      itemObjInfo.value != '木方工艺' &&
      itemObjInfo.value != '钢木结合工艺' &&
      itemObjInfo.value != '纯轻钢工艺'
        ? itemObjInfo.value * 1
        : itemObjInfo.value
  })
  return otherInfoList
}
await initForm()
</script>

<template>
  <main>
    <el-divider>
      <span class="text-xl">其他数据</span>
    </el-divider>
    <div class="flex justify-end gap-5">
      <formButton @click="handleAddCeiling">添加项目</formButton>
    </div>
    <div class="flex flex-col" v-for="(item, index) in checkOther" :key="index">
      <el-divider content-position="left">
        <span class="text-xl">{{ item }} </span>
      </el-divider>
      <lineForm v-if="item == '线条类'" :lineFormItem="lineFormItem!" />
      <waterproofForm v-if="item == '防水类'" :waterproofFormItem="waterproofFormItem!" />
      <otherForm v-if="item == '其他类'" :otherFormItem="otherFormItem!" />
      <tearForm v-if="item == '拆砌改类'" :tearFormItem="tearFormItem!" />
      <cabinetForm v-if="item == '柜子类'" :cabinetFormItem="cabinetFormItem!" />
    </div>
    <el-dialog v-model="addOtherDialog" width="640" align-center :show-close="false" style="padding: 0">
      <div class="flex flex-col">
        <NavBar title="新增项目" @handleClose="handleClose" />
        <div class="grid grid-cols-4 gap-y-5 gap-x-10 p-3">
          <div
            v-for="(item, index) in allOther"
            :key="index"
            class="flex justify-between items-center py-2 px-3 rounded-md"
            :class="checkOther.includes(item) ? 'bg-[#fff4e5] text-[#FF9600]' : 'bg-[#EEEEEE] text-black'"
            @click="handleCheckOther(item)">
            <span>{{ item }}</span>
            <Round theme="outline" size="18" fill="#FF9600" v-if="!checkOther.includes(item)" />
            <CheckOne theme="outline" size="18" fill="#FF9600" v-else />
          </div>
        </div>
      </div>
    </el-dialog>
  </main>
</template>

<style lang="scss"></style>
